<template>
  <view>
    <uni-popup ref="popupRef" type="share" class="popupRef" @change="popupChange" :safe-area="false">
      <view class="popup_main">
        <view class="popup_list">
          <view class="popup_item" v-for="item in popup.columns" :key="item.id" @click="popupItemClick(item)">
            {{ item.label }}
          </view>
        </view>
        <view class="cancel_button" @click="onCancel"> 取消 </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
const emits = defineEmits(["popupComfirm"]);
const popupRef = ref();
const popup = reactive({
  indicatorStyle: `height: 50px;`,
  columns: [],
});

const onShowPopup = (columns) => {
  console.log('columns',columns);
  uni.hideTabBar();
  popup.columns = columns;
  popupRef.value.open();
};
const popupChange = (e) => {
  if (e.show) {
    uni.hideTabBar();
  } else {
    setTimeout(() => {
      uni.showTabBar();
    }, 300);
  }
};
const popupItemClick = (item) => {
  emits("popupComfirm", item);
  popupRef.value.close();
};
const onCancel = () => {
  popupRef.value.close();
};
defineExpose({ onShowPopup, onCancel });
</script>
<style lang="scss" scoped>
.popup_main {
  background: #e8e8e8;

  .popup_list {
    background-color: #fff;
    height: 600rpx;
    overflow-y: scroll;

    .popup_item {
      line-height: 80rpx;
      text-align: center;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .cancel_button {
    margin-top: 20rpx;
    background: #fff;
    line-height: 100rpx;
    text-align: center;
    padding-bottom: 20rpx;
  }
}
</style>
